<template>
	<!-- 系统目录 西成药品 -->
	<div class="MedicenCata">
		<!--  描述  -->
		<div class="header">
			<div class="header-icon">
				<i class="el-icon-flxz"
					style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #409EFF;color: #fff;"></i>
				<span style="font-size: 12px;font-weight:400;margin-left: 12px;">药品分类限制</span>
			</div>
		</div>
		<!-- main -->
		<div class="main">
			<!-- left -->
			<div class="main-left">
				<!-- tree -->
			</div>
			<!-- right -->
			<div class="main-right">
				<!-- tit -->
				<div class="main-icon">
					<div class="main-icon-a">
						<i :class="iconComes"
							style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
						<span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
					</div>
					<!-- btn1 -->
					<div class="main-icon-b">
						<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
						<el-dropdown @command="handleCommand" trigger="click">
							<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-arrow-down el-icon--right"></i></span>
							<el-dropdown-menu slot="dropdown">
							  <el-dropdown-item command="a">可用</el-dropdown-item>
							  <el-dropdown-item command="b">禁用</el-dropdown-item>
							  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
							</el-dropdown-menu>
					    </el-dropdown>
					</div>
					<!-- btn2 -->
					<div class="main-icon-c">
						<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
						<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue"></el-input>
					</div>
					<!-- btn3 -->
					<div class="main-icon-c">
						<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" size="mini" :icon="v.icon" @click="handClick(i)">{{ v.title }}</el-button>
					</div>
				</div>
				
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border @row-dblclick="handledbRow">
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[5, 10, 20]"
				:page-size="pageSize"
				:total="totalSize"
				layout="total, sizes, prev, pager, next, jumper"
				background
				>
				</el-pagination>
			</div>
		</div>
		<!-- feet -->
		<div class="feet">
			<!-- messagesBox -->
			<div class="messagesBox">
				<el-dialog
				  title="查看"
				  :visible.sync="dialogVisible"
				  width="66%"
				  :before-close="handleClose">
				  <!-- messagesBox / tabs -->
				  <div class="tabs">
					  <el-tabs type="border-card">
					    <el-tab-pane label="基本信息[F2]">
							<!-- descriptions -->
								<el-descriptions title="" :column="3" border>
								<el-descriptions-item label="编码:" label-class-name="my-label" content-class-name="my-content">{{ watchData.code }}</el-descriptions-item>
								<el-descriptions-item label="药品类型">{{ watchData.type }}</el-descriptions-item>
								<el-descriptions-item label="有效状态" :contentStyle="{'text-align': 'left'}">
									<el-tag size="small">{{ watchData.zt }}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="通用名称">{{ watchData.name }}</el-descriptions-item>
								<el-descriptions-item label="拼音简码"><span v-py.upperFirstAbbr="watchData.name"></span></el-descriptions-item>
								<el-descriptions-item label="药品剂型">{{ watchData.jix }}</el-descriptions-item>
								<el-descriptions-item label="内服药物">{{ watchData.TEat }}</el-descriptions-item>
								<el-descriptions-item label="OTC">{{ watchData.OTC }}</el-descriptions-item>
								<el-descriptions-item label="药理类别">{{ watchData.kinds }}</el-descriptions-item>
								<el-descriptions-item label="药理子类别">{{ watchData.sonKinds }}</el-descriptions-item>
								<el-descriptions-item label="三级药理类别">{{ watchData.IIIkinds }}</el-descriptions-item>
								<el-descriptions-item label="毒麻类型">{{ watchData.dum }}</el-descriptions-item>
								<el-descriptions-item label="院内制剂">{{ watchData.yn }}</el-descriptions-item>
								<el-descriptions-item label="皮试否">{{ watchData.ps }}</el-descriptions-item>
								<el-descriptions-item label="抗生素">{{ watchData.jx }}</el-descriptions-item>
								<el-descriptions-item label="抗生素等级">{{ watchData.ATC }}</el-descriptions-item>
								<el-descriptions-item label="是否高危药品">{{ watchData.dangerous }}</el-descriptions-item>
								<el-descriptions-item label="是否液体">{{ watchData.yt }}</el-descriptions-item>
								<el-descriptions-item label="临床用途">{{ watchData.lc }}</el-descriptions-item>
								<el-descriptions-item label="病案费别">{{ watchData.priceKinds }}</el-descriptions-item>
								<el-descriptions-item label="激素药品">{{ watchData.js }}</el-descriptions-item>
								<el-descriptions-item label="终止妊娠">{{ watchData.rs }}</el-descriptions-item>
								<el-descriptions-item label="抗肿瘤">{{ watchData.zl }}</el-descriptions-item>
								<el-descriptions-item label="是否重点监控">{{ watchData.jk }}</el-descriptions-item>
								<el-descriptions-item label="蛋白同化制剂">{{ watchData.db }}</el-descriptions-item>
							</el-descriptions>
							<el-descriptions :column="1">
								<el-descriptions-item label="备注">
									<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="watchData.remark" readonly> </el-input>
								</el-descriptions-item>
							</el-descriptions>
						</el-tab-pane>
					    <el-tab-pane label="药典说明[F3]">
							<el-descriptions :column="1">
								<el-descriptions-item label="药理作用">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="适 应 症">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="用法用量">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="药代动力学">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
							</el-descriptions>
						</el-tab-pane>
					    <el-tab-pane label="使用注意[F4]">
							<el-descriptions :column="1">
								<el-descriptions-item label="不良反应">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="注意事项">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="禁忌说明">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" readonly  placeholder="请输入内容" v-model="watchData.remark" > </el-input>
								</el-descriptions-item>
								<el-descriptions-item label="配伍禁忌">
									  <el-table
									    :data="taboo" style="width: 100%" border >
									    <el-table-column prop="" label="行号" width="60" align="center"></el-table-column>
									    <el-table-column prop="" label="药典名称" width="340" align="center"></el-table-column>
										<el-table-column prop="" label="类型" width="60" align="center"></el-table-column>
										<el-table-column prop="" label="禁忌描述" width="340" align="center"></el-table-column>
									  </el-table>
								</el-descriptions-item>
							</el-descriptions>
						</el-tab-pane>
					  </el-tabs>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				    <el-button type="primary" @click="dialogVisible = false" size="mini">关闭</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>

	</div>
</template>

<script>
	// selfs / js
	import MedicenCata from '../../../external/MedicenCata.js'
	import Chinese from "../../../external/PY.js";
	export default {
		components: {
			MedicenCata
		},
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// str
				pageNum: 1, //当前页currentPage
				pageSize: 5,
				totalSize: 10, //总条数
				searchValue:'',
				CatalogueName:'全部',
				DropDownedName:'可用',
				iconComes:'el-icon-flxz',
				toPinyin:'',
				// boolean
				dialogVisible:false,
				disabled:true,
				// number
				
				// arr
				data: [],
				taboo: [],
				watchData: [],
				// title右侧按钮
				headerBtn:[
				 // { back:"back", title:"返回", type:"primary" },
				 { refesh:"refesh", title:"刷新", type:"", icon:"el-icon-refresh" },
				 { senior:"senior", title:"高级", type:"", icon:"" },
				],
				// title右侧按钮
				tableRows:[
					{ name:"系统序号", prop:"num", type:"" },{ name:"编码", prop:"code", type:"" },{ name:"名称", prop:"name", type:"" },
					{ name:"药品类型", prop:"type", type:""},{ name:"药品剂型", prop:"jix", type:"" },{ name:"毒麻类型", prop:"dum", type:"" },{ name:"药理类别", prop:"kinds", type:"" },
					{ name:"抗生素等级", prop:"ATC", type:"" },{ name:"抗生素否", prop:"TATC", type:"" },{ name:"OTC否", prop:"OTC", type:"" },{ name:"内服否", prop:"TEat", type:"" },
					{ name:"操作时间", prop:"date", type:"" },{ name:"操作人", prop:"Opter", type:"" },{ name:"有效状态", prop:"zt", type:"" },{ name:"内置否", prop:"nz", type:"" },
				],
				tableData: [
					{ num:'1', code:'X0000001164', name: '尼可刹米注射液', type:'西药', jix:'注射剂', dum:'普通药',yt:'非液体',lc:'', kinds:'神经系统用药', sonKinds:'中枢神经兴奋药',IIIkinds:'', ATC:'否', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-26 21：30：22', Opter:'admin', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
					{ num:'2', code:'X0000001165', name: '注射用重组人白介素_2（123ALA）', type:'西药', jix:'注射剂',yt:'非液体',lc:'', dum:'普通药', kinds:'血液系统用药', sonKinds:'升血细胞药',IIIkinds:'升血小板药', ATC:'否', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-02 08：28：02', Opter:'杨勇', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
					{ num:'3', code:'X0000001166', name: '复方泛影葡胺注射液', type:'西药', jix:'注射剂', dum:'普通药',yt:'非液体',lc:'', kinds:'医学影像对比例', sonKinds:'X线与CT对比剂',IIIkinds:'心、血管造影与血管内给药增强对比剂', ATC:'否', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-16 21：20：12', Opter:'黄丹', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'B级高危',remark:' ' },
					{ num:'4', code:'X0000001167', name: '重组人生长激素注射液', type:'西药', jix:'注射剂', dum:'普通药',yt:'非液体',lc:'', kinds:'内分泌系统用药', sonKinds:'下丘脑-垂体激素与相关药物',IIIkinds:'生长激素', ATC:'0', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-20 21：10：24', Opter:'古永', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
					{ num:'5', code:'X0000001168', name: '奥卡西平片', type:'西药', jix:'片剂', dum:'普通药',yt:'非液体',lc:'', kinds:'神经系统用药', sonKinds:'抗癫痫药与抗惊厥药',IIIkinds:'', ATC:'0', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-20 21：10：24', Opter:'古永', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
					{ num:'6', code:'X0000001169', name: '牛碱性成纤维细胞生长因子滴眼液', type:'西药', jix:'滴眼剂', dum:'普通药',yt:'非液体',lc:'', kinds:'生物制品', sonKinds:'细胞因子',IIIkinds:'', ATC:'0', TATC:'否', OTC:'否', TEat:'否', date: '2024-11-20 21：10：24', Opter:'古永', zt: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
				]
			};
		},
		mounted() {
			// 模拟信息
			this.data = MedicenCata.map(function(v) {
				return v
			})
		},
		methods: {
			/*
				about tree
			*/
			handleNodeClick(data) {
				console.log(data.title);
				this.CatalogueName = data.title
				this.iconComes = data.icon
			},
			/*
				about table
			*/
		   // col 里面包含了表头字段和名称，list 是表格数据
		       columnWidth(col, list) {
		         let prop = col.prop,lab = col.lab;
		         let width = 40; // 设定一个最小值
		         let maxlenStr = ""; // 最长字符串
		         for (let info of list) {
		           if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
		         }
		         width = Math.max(width, len(lab), len(maxlenStr));
		         // 表格自带的内边距(20px) 自调
		         return width + 12; // 这里加了 12px
		   
		         function len(str) {
		           // 实际分配长度可根据需要自行调整
		           let length = 0;
		           for (const char of str + "") {
		             // 英文小写字符 8px
		             if ("a" <= char && char <= "z") length += 8;
		             // 英文大写字符 12px
		             else if ("A" <= char && char <= "Z") length += 12;
		             // 中文字符 16px
		             else if (char >= "\u4e00" && char <= "\u9fa5") length += 30;
		             // 其他 8px
		             else length += 8;
		           }
		           return length;
		         }
		       },

			// db events
			handledbRow(row, column, event){
				if(row){ this.watchData = row; this.dialogVisible = true } else { console.log('fail'); }
				console.log(this.watchData);
				// this.toPinyin = Chinese(this.watchData.name)
				// console.log(this.toPinyin);
			},
			handleClose(done) {
				done();
			},
			handleCommand(command) {
			  // 这里的 command 就是你点击的菜单项的 command 属性值
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
			},
			
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .el-dropdown-menu__item{
		font-size: 12px;
	}
	/deep/ .el-dialog__body{
		padding: 30px;
	}
	/deep/ .el-descriptions{
		font-size: 12px !important;
	}
	/deep/ .el-descriptions-item__container{
		display: flex !important;
		// align-items: center !important;
		padding-top: 12px !important;
	}
	/deep/ .el-descriptions-item__label:not(.is-bordered-label){
		padding-left: 0;
		width: 66px;
		display: flex;
		justify-content: right;
	}
	/deep/ .el-color-picker__icon, .el-input, .el-textarea{
		width: 100%;
	}
	.MedicenCata {
		height: 100%;
		width: 100%;
		// header
		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 40px;
			background-color: #efefef;
			padding: 4px;

			// justify-content: space-evenly;
			// icon
			.header-icon {
				display: flex;
				align-items: center;
			}

		}

		// main
		.main {
			width: 100%;
			display: flex;
			justify-content: left;

			// left
			.main-left {
				/deep/ .el-tree-node__content {
					height: 40px;
					padding-left: 0 !important;
				}
				/deep/ .el-tree-node__label{
					font-size: 12px;
				}
				background-color: red;
				height: 100%;
			}

			// right
			.main-right {
				height: 100%;
				// icon
				.main-icon {
					display: flex;
					align-items: center;
					padding: 12px;
					line-height: 40px;
					.main-icon-a{
						// width: 240px;
						// background-color: #00557f;
					}
					.main-icon-b{
						margin-left: 28px;
						/deep/ .el-dropdown{
							font-size: 12px;
							cursor: pointer;
						}
						/deep/ .el-dropdown:hover {
							font-weight: bold;
							color: #66b1ff;
						}
						/deep/ .el-icon--right{
							// background-color: #66b1ff;
						}
						/deep/ .el-popper[x-placement^=bottom]{
							margin-top: 0;
						}
					}
					// c
					.main-icon-c{
						margin-left: 28px;
						display: flex;
						/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
							width: 80%;
						}
					}
				}
				// table
				/deep/ .el-table .cell{
					font-size: 12px;
					text-align: center;
				}

				.table{
					padding: 12px;
				}
			}
		}

		// feet
		.feet {
			// alert
			.messagesBox{
				/deep/ .el-dialog__title{
					font-size: 12px;
				}
				/deep/ .el-table{
					font-size: 12px;
				}
			}
		}

	}
</style>